<template id='TopBar'>
  <div
    class="TopBar"
    :class="[{ isShow: isShowTopBar }, { isHiden: !isShowTopBar }]"
  >
    <b-navbar>
      <b-navbar-nav>
        <b-nav-item class="narBarLogo">
          <b-img
            :src="logoIcon"
            fluid
            alt="Responsive image"
            @click="toHome"
          ></b-img>
        </b-nav-item>
        <b-nav-item
          @click="choseNav(item)"
          @mouseover="showChild(item)"
          @mouseleave="initChild(item)"
          v-for="(item, index) in menuList"
          :key="index"
          class="narBarText"
          :class="{ isBlod: isClick == item.id }"
        >
          {{ item.name }}
          <div class="hoverChild" v-if="item.isChild" @click="goToChild(item)">
            News
          </div>
          <div :class="{ isClick: isClick == item.id }"></div>
          <div
            class="tips"
            :class="[{ isShowTip: isShowTips }, { isHidenTip: !isShowTips }]"
            v-if="!isinit && item.id == currentSelect"
          >
            coming soon
          </div>
        </b-nav-item>
        <!-- <b-nav-item>
          <div class="connect" @click="clickConnect">Connect Wallet</div>
          <div
            class="tips"
            :class="[{ isShowTip: isShowTips }, { isHidenTip: !isShowTips }]"
            v-if="!isinit && currentSelect == 7"
            style="padding-left: 10px"
          >
            coming soon
          </div>
        </b-nav-item> -->
      </b-navbar-nav>
    </b-navbar>
    <div class="phone"></div>
  </div>
</template>

<script>
export default {
  name: "TopBar",
  components: {},
  props: {
    isClick: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      currentSelect: 0,
      isinit: true,
      isShowTips: false,
      isShowTopBar: true,
      logoIcon: require("../assets/images/index/logo.png"),
      menuList: [
        {
          name: "Home",
          id: 1,
          isChild: false,
          path: "/",
        },
        { name: "SDK", id: 2, isChild: false, path: "/downloads" },
        { name: "Games", id: 3, isChild: false, path: "/games" },
        { name: "News", id: 4, isChild: false, path: "/news" },
        { name: "About", id: 5, isChild: false, path: "" },
        // { name: "Launchpad", id: 4, isChild: false, path: false },
        // { name: "Marketplace", id: 5, isChild: false, path: false },
        // { name: "More", id: 6, isChild: false, path: "/news" },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {
    toHome() {
      this.$router.push("/");
    },
    clickConnect() {
      this.currentSelect = 7;
      this.isinit = false;
      this.isShowTips = true;
      setTimeout(() => {
        this.isShowTips = false;
      }, 1500);
    },
    choseNav(item) {
      if (item.id == 6) {
        this.menuList[5].isChild = !this.menuList[5].isChild;
      } else {
        if (item.path) {
          this.$router.push(item.path);
        } else {
          this.currentSelect = item.id;
          this.isinit = false;
          this.isShowTips = true;
          setTimeout(() => {
            this.isShowTips = false;
          }, 1500);
        }
      }
    },
    showChild(item) {
      // if (item.id == 6) {
      //   this.menuList[5].isChild = true;
      // }
    },
    initChild(item) {
      // this.menuList[5].isChild = false;
    },
    goToChild(item) {
      this.$router.push(item.path);
    },
    handleScroll(e) {
      let scrollTop = e.target.scrollTop;
      let windowHeight = e.target.clientHeight;
      let scrollHeight = e.target.scrollHeight;
      if (scrollTop >= Math.ceil((scrollHeight / 8193) * 100)) {
        this.isShowTopBar = false;
      } else {
        this.isShowTopBar = true;
      }
    },
  },
  created() {},
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  activated() {},
};
</script>

<style lang='less' scoped>
.TopBar {
  user-select: none;
  height: 128px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  .tips {
    color: #fff;
    font-size: 24px;
    // padding: 5px;
    display: flex;
    justify-content: center;
    // width: 100%;
    position: fixed;
    bottom: 0px;
  }
  .isShowTip {
    -webkit-animation: slide-in-blurred-top 1s cubic-bezier(0.23, 1, 0.32, 1)
      both;
    animation: slide-in-blurred-top 1s cubic-bezier(0.23, 1, 0.32, 1) both;
    @-webkit-keyframes slide-in-blurred-top {
      0% {
        -webkit-transform: translateY(-1000px) scaleY(1) scaleX(1);
        transform: translateY(-1000px) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0;
      }
      100% {
        -webkit-transform: translateY(0) scaleY(1) scaleX(1);
        transform: translateY(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
      }
    }
    @keyframes slide-in-blurred-top {
      0% {
        -webkit-transform: translateY(-1000px) scaleY(1) scaleX(1);
        transform: translateY(-1000px) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0;
      }
      100% {
        -webkit-transform: translateY(0) scaleY(1) scaleX(1);
        transform: translateY(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
      }
    }
  }
  .isHidenTip {
    -webkit-animation: slide-out-blurred-top 0.45s
      cubic-bezier(0.755, 0.05, 0.855, 0.06) both;
    animation: slide-out-blurred-top 0.45s
      cubic-bezier(0.755, 0.05, 0.855, 0.06) both;
    @-webkit-keyframes slide-out-blurred-top {
      0% {
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
      }
      100% {
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0;
      }
    }
    @keyframes slide-out-blurred-top {
      0% {
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
      }
      100% {
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0;
      }
    }
  }
  .navbar {
    padding: 0 12.7%;
    height: inherit;
    box-shadow: -1px 10px 11px 0px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: -1px 10px 11px 0px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: -1px 10px 11px 0px rgba(0, 0, 0, 0.65);
    .navbar-nav {
      flex: 1;
      height: 100%;
      .nav-item {
        align-items: center;
        justify-content: center;
        display: flex;
        .nav-link {
          padding: 0;
          font-size: 24px;
          color: #fff;
          .connect {
            background-color: #438dee;
            border-radius: 10px;
            padding: 10px;
          }
        }
      }
      .narBarLogo {
        margin-right: auto;
        .nav-link {
          padding: 0;
          img {
            width: 159px;
            height: 55px;
          }
        }
      }

      .narBarText {
        border-bottom: 5px solid rgba(0, 0, 0, 0);
        margin-right: 5%;
        position: relative;
        .nav-link {
          font-size: 24px;
          color: #fff;
          padding: 0;
          font-weight: 500;
          height: 100%;
          display: flex;
          align-items: center;
        }
        .hoverChild {
          position: fixed;
          bottom: 0;
          -webkit-animation: swing-in-top-bck 1.5s
            cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
          animation: swing-in-top-bck 1.5s
            cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
          @-webkit-keyframes swing-in-top-bck {
            0% {
              -webkit-transform: rotateX(70deg);
              transform: rotateX(70deg);
              -webkit-transform-origin: top;
              transform-origin: top;
              opacity: 0;
            }
            100% {
              -webkit-transform: rotateX(0deg);
              transform: rotateX(0deg);
              -webkit-transform-origin: top;
              transform-origin: top;
              opacity: 1;
            }
          }
          @keyframes swing-in-top-bck {
            0% {
              -webkit-transform: rotateX(70deg);
              transform: rotateX(70deg);
              -webkit-transform-origin: top;
              transform-origin: top;
              opacity: 0;
            }
            100% {
              -webkit-transform: rotateX(0deg);
              transform: rotateX(0deg);
              -webkit-transform-origin: top;
              transform-origin: top;
              opacity: 1;
            }
          }
        }
        .hoverChild:hover {
          color: #438dee;
        }
      }
      .isBlod {
        .nav-link {
          font-weight: bold;
        }
      }
      .isClick {
        position: absolute;
        bottom: 0;
        width: 100%;
        border-bottom: 5px solid #438dee;
        -webkit-animation: scale-up-hor-center 0.25s
          cubic-bezier(0.39, 0.575, 0.565, 1) both;
        animation: scale-up-hor-center 0.25s cubic-bezier(0.39, 0.575, 0.565, 1)
          0.5s both;
        @-webkit-keyframes scale-up-hor-center {
          0% {
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
          }
          100% {
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
          }
        }
        @keyframes scale-up-hor-center {
          0% {
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
          }
          100% {
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
          }
        }
      }
    }
  }
  .phone {
    display: none;
  }
}
.isShow {
  z-index: 99;
  -webkit-animation: slide-in-bck-center 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  animation: slide-in-bck-center 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  @-webkit-keyframes slide-in-bck-center {
    0% {
      -webkit-transform: translateZ(600px);
      transform: scale(1.2);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0);
      transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes slide-in-bck-center {
    0% {
      -webkit-transform: translateZ(600px);
      transform: scale(1.2);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0);
      transform: scale(1);
      opacity: 1;
    }
  }
}
.isHiden {
  -webkit-animation: slide-is-hiden 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-is-hiden 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  @-webkit-keyframes slide-is-hiden {
    0% {
      -webkit-transform: translateZ(0);
      transform: scale(1);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateZ(600px);
      transform: scale(1.2);
      opacity: 0;
    }
  }
  @keyframes slide-is-hiden {
    0% {
      -webkit-transform: translateZ(0);
      transform: scale(1);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateZ(600px);
      transform: scale(1.2);
      opacity: 0;
    }
  }
}
@media screen and (max-width: 480px) {
  .TopBar {
    background-color: rgba(0, 0, 0, 0);
    .tips {
      right: 20px;
    }
    .navbar {
      // display: none;
      padding: 0 20px;
      .navbar-nav {
        justify-content: space-between;
        .narBarLogo {
        }
        .narBarText {
          .nav-link {
            font-size: 30px !important;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 375px) {
  .TopBar {
    .navbar {
      padding: 0 10px;
      .navbar-nav {
        .nav-item {
          .nav-link {
            // font-size: 30px;
          }
        }
        .narBarText {
          .nav-link {
            font-size: 20px !important;
          }
          // margin-right: 10px;
        }
      }
    }
  }
}
</style>